<!DOCTYPE html>
<html>
	<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<head>
		<title>An African Language Short Story Competition</title>
	</head>

	<body>
	    <ul>
	    <li><a id="home" href="index.php">Home</a></li>
	    <li><a id="original" href="submit.php">Original Story Submission</a></li>
            <li><a id="translation" href="submittranslation.php">Translated Story Submission</a></li>
            <li><a id="stories" class=active href="#">Submitted Stories</a></li>
	    <li><a id="statistics" href="submissionstatistics.php">Submissions per Language</a></li>
            <li><a id="contact" href="contact.php">Contact</a></li>
            <li><a id="resources" href="resources.php">Resources</a></li>
            <li><a id="flyers" href="flyers.php">Flyers</a></li>
            <li><a id="faq" href="faq.php">Frequently Asked Questions</a></li>
            <li><a id="privacy" href="privacy.php">Privacy</a></li>
	    </ul>
	    <header>
			<h1>Tuvute Pamoja
			<a href="https://deeplearningindaba.com">
                         <img src="images/deeplearningindaba.svg" alt="Deeplearning Indaba" style="height:60px">
			</a></h1>
        </header>
<?php include 'submitdatabaseinfo.php';?>
<?php include 'submitsetup.php';?>
<?php include 'storycommentsdatabaseinfo.php';?>

		<h1 id="title">An African Language Short Story Competition</h1>
<div>
<p>The stories are provided under a creative commons attribution license that allows others to distribute, remix, adapt and build upon the work, even commercially, as long as they credit the authors for the original creation. For more on this license see <a href="https://creativecommons.org/licenses/by/4.0/">https://creativecommons.org/licenses/by/4.0/</a>.  The submitted stories are provided here to allow for translation and evaluation. To enable a fairer evaluation of the stories, the authors and translators will remain unknown until after the evaluation process. Should you wish to reuse and redistribute the stories please be sure to do so once you can attribute the authors and translators.</p>
</div>
<div>

<h3 id="languageselection">Choose a language you want to read stories in</h3>
</div>
<div>
	<select class="language" id="languagefromoptions" name="languagefromoptions" 
           onchange="getstorytitles(this.value)">
       <?php include 'languagelist.php';?>
        </select>
   </p>
</div>
</section>
<section>
<div>
<table id="titles"></table>
</div>
</section>
<section>
<div class="storycontainer">
<div class="story">
<p id="story">
</p>
</div>
</div>
</section>
<section>
<h4 id="comments">Comments</h4>
<p id="comments">
</p>
</section>
<section>
<h4 id="newcomment">New Comment</h4>
</section>
</body>
<?php include 'footer.php';?>
<script>
function getstorytitles(lang) {

  //use ajax to get stories from database in that language	
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("titles").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET","gettitles.php?lang="+lang,true);
  xmlhttp.send();
}

function getstory(storyid) {
 //use ajax to get stories from database in that language      
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("story").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET","getstory.php?primarykey="+storyid,true);
  xmlhttp.send();
}
</script>
</html>

